<template>
  <view class="index">
    <base-header />
		
    <view class="p-12">
      <uni-swiper-dot :dots-styles="{backgroundColor: '#C7CED8', border: '#C7CED8', selectedBackgroundColor: '#2080F7', selectedBorder: '#2080F7'}" :info="adList" :current="current" field="cover" mode="round">
        <swiper
          class="banner"
          autoplay
          circular
          @change="change"
        >
          <swiper-item v-for="(item ,i) in adList" :key="i">
            <view class="w-full h-full">
              <image class="w-full h-full rounded-6" :src="item.cover" mode="" @click="$f.href(item.url)" />
            </view>
          </swiper-item>
        </swiper>
      </uni-swiper-dot>
      <view class="notice flex items-center">
        <view class="iconfont icon-horn" />
        <swiper vertical class="notice-swiper">
          <swiper-item v-for="item in noticeList" :key="item.id">
            <uni-notice-bar background-color="#FFF5E5" scrollable single :text="item.title" />
          </swiper-item>
        </swiper>
      </view>
    </view>
    <!-- 精品推荐 开始 -->
    <view class="p-12 bg-white mb-12">
      <view class="title-bar">精品推荐</view>
      <scroll-view scroll-x class="recommend" style="">
        <view class="flex flex-nowrap">
          <view v-for="item in recommendList" :key="item.id" class="recommend-item">
            <view class="recommend-bar">
              <view class="iconfont icon-file" />
              <view class="recommend-title">{{ item.title }}</view>
            </view>
            <view class="recommend-category">
              <view v-for="v in item.children" :key="v.id" class="recommend-cateItem ellipsis-1" @click="goNav(v.id)">
                {{ v.title }}
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
    <!-- 精品推荐 结束 -->
		
    <!-- 精品推荐 开始 -->
    <view class="p-12 bg-white mb-12">
      <view class="title-bar">精品推荐</view>
      <view class="flex flex-wrap m--4">
        <view v-for="item in adSmallList" :key="item.id" class="adSmall-item">
          <image class="adSmall-itemImg" :src="item.cover" mode="" @click="$f.href(item.url)" />
        </view>
      </view>
    </view>
    <!-- 精品推荐 结束 -->
		
    <index-goods :goods-cate-id.sync="goodsCateId" />
		
    <user-custom :visible.sync="customVisible" />
  </view>
</template>
<script>
import UserCustom from '@/components/User/Custom'
import IndexGoods from '@/components/Index/Goods'
export default {
  components: {
    IndexGoods,
    UserCustom
  },
  data() {
    return {
      current: 0,
      recommendList: [],
      adList: [],
      adSmallList: [],
      noticeList: [],
      goodsCateList: [],
      customVisible: false,
      goodsCateId: 0
    }
  },
  computed: {
		
  },
  onShareAppMessage() {
    return this.$f.wxShare()
  },
  onShareTimeline() {
    return this.$f.wxShare()
  },
  onLoad() {
    this.getData()
  },
  methods: {
    goNav(id) {
      this.$Router.push('/pages/index/nav?fcId=' + id)
    },
    getData() {
      this.$f.get('app/index').then(res => {
        this.recommendList = res.data.recommendList
        this.adList = res.data.adList
        this.adSmallList = res.data.adSmallList
        this.noticeList = res.data.noticeList
        this.goodsCateList = res.data.goodsCateList
        this.goodsCateId = res.data.goodsCateList?.[0]?.id ?? 0
      })
    },
    change(e) {
      this.current = e.detail.current
    }
  }
}
</script>
<style lang="scss">
	.adSmall-item {
		padding: 8rpx;
		width: 50%;
		box-sizing: border-box;
	}
	.adSmall-itemImg {
		display: block;
		width: 100%;
		height: 132rpx;
		border-radius: 8rpx;
	}
</style>

<style lang="scss" scoped>
.index {
	.banner {
		width: 100%;
		height: 230rpx;
	}
	.notice {
		margin-top: 24rpx;
		height: 68rpx;
		border-radius: 12rpx;
		border: 1rpx solid #FFD87E;
		background-color: #FFF5E5;
		overflow: hidden;
		.icon-horn {
			color: #FFB43A;
			padding-left: 20rpx;
		}
		.uni-noticebar {
			font-size: 26rpx;
			line-height: 40rpx;
			padding: 12rpx 24rpx;
			margin-bottom: 0;
		}
		.notice-swiper {
			flex: 1;
			height: 68rpx;
		}
	}
	
	.recommend {
		white-space: nowrap;
		height: 272rpx;
	}
	.recommend-item {
		flex-shrink: 0;
		width: 540rpx;
		padding: 24rpx;
		border-radius: 8rpx;
		margin-right: 20rpx;
		box-sizing: border-box;
		background-color: #F5F7FB;
	}
	.recommend-bar {
		display: flex;
		align-items: center;
		margin-bottom: 16rpx;
		.icon-file {
			color: $uni-primary;
			margin-right: 8rpx;
		}
	}
	.recommend-title {
		font-size: 30rpx;
		font-weight: 600;
	}
	.recommend-category {
		display: flex;
		flex-wrap: wrap;
		align-content: flex-start;
		height: 180rpx;
		margin: -8rpx -10rpx;
	}
	.recommend-cateItem {
		width: 50%;
		color: #8493A6;
		font-size: 26rpx;
		line-height: 44rpx;
		padding: 8rpx 10rpx;
		box-sizing: border-box;
	}
}

.m--4 {
	margin-left: -8rpx;
	margin-right: -8rpx;
}
</style>
